<template>
  <div class="collectPluginBox">
    <div class="collectPlugin" v-show="isShow">
      <!-- <jee-icon iconClass="guanbi" @click="close"></jee-icon> -->
      <span class="iconfont icon-hint"></span>
      检测到采集插件未开启，请  &ensp;
        <span class="btn" @click="openCollect">  前往开启</span> ，未安装？
      <span class="btn" @click="download">立即下载</span>
    <span class="iconfont icon-delete2 close"  @click="close"></span>
    </div>
    <div class="collectPlugin" v-show="updateShow">
      检测到采集插件有更新，<span @click="download">立即下载</span> 体验最新功能
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, createVNode } from "vue";
import { useRoute, useRouter } from "vue-router";
import request from "@/api/index";
import { Modal } from "ant-design-vue";
import msgModal from "@/components/modal/modelConfig/MsGModal";

// route
const route = useRoute();
const router = useRouter();
// data
const isShow = ref<boolean>(false);
const updateShow = ref<boolean>(false);
const CollectConfig = ref({
  version: ''
}); // 本地插件配置
const CollectPluginConfig = ref({
  name: '',
  version: ''
}); // 服务器插件配置

// methods
// 获取插件信息
const getPlugin = () => {
  request.fetchCollectPlugin({name: 'CollectPlus'}).then((res: any) => {
    if(res.data.code === 1) {
      CollectPluginConfig.value.name = res.data.data.name
      CollectPluginConfig.value.version = res.data.data.version
      console.log(CollectPluginConfig.value,'CollectPlusres');
    }
  })
};
const close = () => {
  isShow.value = !isShow.value
};
const download = () => {
  const host = window.location.protocol + '//' + window.location.host
  const protocol = host.indexOf('https') > -1 ? 'https' : 'http'
  window.open(protocol+'://api.jeecms.com/MODULE-RES/plus/download?name=CollectPlus')
};
const openCollect = () => {
  Modal.confirm(
    Object.assign({}, msgModal.confirm, {
      title: "从右上角菜单 》 更多工具 》扩展程序可以进入 插件管理页面开启插件,也可以直接在地址栏输入 chrome://extensions 访问开启插件",
      content:
        "",
      icon: createVNode("i", {
        class: "iconfont icon-hint1 warning_ICON",
      }),
      okText: "确定",
      onOk: async () => {
        Modal.destroyAll();
      },
      onCancel() {
        Modal.destroyAll();
      },
    })
  );
};

// watch
watch(() => route, (newVal: any,  oldVal:  any) => {
  isShow.value = false
  updateShow.value = false
  if(newVal.name === '采集管理') {
    isShow.value = true
    getPlugin()
    // 发送信息获取 插件版本
    window.postMessage({ 'CollectPlugin': true }, '*')
  }
}, {deep: true, immediate: true});

watch(() => CollectPluginConfig.value, (newVal: any,  oldVal:  any) => {
  // 判断下版本是否一样
  if(parseFloat(CollectPluginConfig.value.version) > parseFloat(CollectConfig.value.version)) {
    updateShow.value = true
  }else {
    updateShow.value = false
  }
}, {deep: true});

// onMounted
onMounted(() => {
    // 监听页面事件 监听版本
    window.addEventListener('message', function (e) {
      if (e.data.CollectConfig) {
        CollectConfig.value = e.data.CollectConfig
        isShow.value = false
      }
    }, false)
})

</script>

<style scoped lang="scss">
.collectPlugin {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #1f6ded;
  height: 52px;
  opacity: 0.9;
  font-size: 18px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 52px;
  position: relative;
  .iconfont {
    margin-right: 13px;
    font-size: 20px;
  }
  .close {
    margin-right: 0;
    position: absolute;
    right: 20px;
  }
  .btn {
    color: #16c5df;
    cursor: pointer;
    text-decoration: underline;
  }
  .jee-svg-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
    font-size: 18px;
    color: #4a6b7b;
    fill: #4a6b7b;
  }
}
</style>
